<include file="public@header"/>
<style type="text/css">
    .pic-list li {
        margin-bottom: 5px;
    }
</style>
<style type="text/css">
    .imgFile {
        width:500px;
        border:1px solid #dbdbdb;
        display:flow-root
    }
    @supports (display:flow-root) {
        .imgFile {
            display:flow-root;
        }
    }.imgFile label input {
         display:none
     }
    .imgFile label span {
        width:100px;
        height:100px;
        display:inline-block;
        border:1px solid #999999;
        margin:16px;
        position:relative
    }
    .imgFile label span:after {
        width:60%;
        height:1px;
        background:#dbdbdb;
        content:"";
        display:inline-block;
        position:absolute;
        top:50%;
        left:calc(50% - 30%)
    }
    .imgFile label span:before {
        width:1px;
        height:60%;
        background:#dbdbdb;
        content:"";
        display:inline-block;
        position:absolute;
        left:50%;
        top:calc(50% - 30%)
    }
    .imgFile .imgDiv {
        width:100px;
        height:100px;
        border:1px solid #999999;
        margin:16px;
        position:relative;
        float:left
    }
    .imgFile .imgDiv img {
        width:100%;
        height:100%;
    }
    .imgFile .imgDiv span {
        width:100%;
        height:20%;
        color:white;
        display:none;
        background:rgba(0,0,0,0.38);
        position:absolute;
        top:0;
        left:0;
        right:0
    }
    .imgFile .imgDiv i {
        font-style:inherit;
        float:right;
        cursor:pointer;
        margin-right:5px;
        line-height:100%;
        font-size:20px
    }
    .imgFile .imgDiv:hover > span {
        display:block
    }
    .imgFile1 {
        width:500px;
        border:1px solid #dbdbdb;
        display:flow-root
    }
    @supports (display:flow-root) {
        .imgFile1 {
            display:flow-root;
        }
    }.imgFile1 label input {
         display:none
     }
    .imgFile1 label span {
        width:100px;
        height:100px;
        display:inline-block;
        border:1px solid #999999;
        margin:16px;
        position:relative
    }
    .imgFile1 label span:after {
        width:60%;
        height:1px;
        background:#dbdbdb;
        content:"";
        display:inline-block;
        position:absolute;
        top:50%;
        left:calc(50% - 30%)
    }
    .imgFile1 label span:before {
        width:1px;
        height:60%;
        background:#dbdbdb;
        content:"";
        display:inline-block;
        position:absolute;
        left:50%;
        top:calc(50% - 30%)
    }
    .imgFile1 .imgDiv1 {
        width:100px;
        height:100px;
        border:1px solid #999999;
        margin:16px;
        position:relative;
        float:left
    }
    .imgFile1 .imgDiv1 img {
        width:100%;
        height:100%;
    }
    .imgFile1 .imgDiv1 span {
        width:100%;
        height:20%;
        color:white;
        display:none;
        background:rgba(0,0,0,0.38);
        position:absolute;
        top:0;
        left:0;
        right:0
    }
    .imgFile1 .imgDiv1 i {
        font-style:inherit;
        float:right;
        cursor:pointer;
        margin-right:5px;
        line-height:100%;
        font-size:20px
    }
    .imgFile1 .imgDiv1:hover > span {
        display:block
    }
</style>
<link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

<script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
<script src="__STATIC__/js/distpicker.data.js"></script>
<script src="__STATIC__/js/distpicker.js"></script>
<script src="__STATIC__/js/main.js"></script>
<script>



</script>
<script type="text/html" id="photos-item-tpl">
    <li id="saved-image{id}">
        <input id="photo-{id}" type="hidden" name="photo_urls[]" value="{filepath}">
        <input class="form-control" id="photo-{id}-name" type="text" name="photo_names[]" value="{name}"
               style="width: 200px;" title="图片名称">
        <img id="photo-{id}-preview" src="{url}" style="height:36px;width: 36px;"
             onclick="imagePreviewDialog(this.src);">
        <a href="javascript:uploadOneImage('图片上传','#photo-{id}');">替换</a>
        <a href="javascript:(function(){$('#saved-image{id}').remove();})();">移除</a>
    </li>
</script>


<!--<script type="text/html" id="files-item-tpl">-->
<!--    <li id="saved-file{id}">-->
<!--        <input id="file-{id}" type="hidden" name="file_urls[]" value="{filepath}">-->
<!--        <input class="form-control" id="file-{id}-name" type="text" name="file_names[]" value="{name}"-->
<!--               style="width: 200px;" title="文件名称">-->
<!--        <a id="file-{id}-preview" href="{preview_url}" target="_blank">下载</a>-->
<!--        <a href="javascript:uploadOne('文件上传','#file-{id}','file');">替换</a>-->
<!--        <a href="javascript:(function(){$('#saved-file{id}').remove();})();">移除</a>-->
<!--    </li>-->
<!--</script>-->

</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li><a href="shopassistant">店员列表</a></li>
        <li  class="active"><a href="shopassistantadd">店员添加</a></li>
    </ul>
    <form action="{:url('Drugstore/shopassistantadddo')}" method="post" class="form-horizontal js-ajax-form margin-top-20">
        <div class="row">
            <div class="col-md-9">
                <table class="table table-bordered">
                    <tr>
                        <th>店员名称<span class="form-required">*</span></th>
                        <td>
                            <input class="form-control" type="text" name="managername" id="title" required value="" placeholder="请输入店长名称"/>
                        </td>
                    </tr>
                    <tr>
                        <th width="100">门店<span class="form-required">*</span></th>
                        <td>
                            <select class="form-control" name="shopname" id="input-parent_id">
                                <foreach name="res" item="vo">
                                    <option value="{$vo['id']}">{$vo['shopname']}</option>
                                </foreach>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th>手机号<span class="form-required">*</span></th>
                        <td>
                            <input class="form-control" type="text" name="tel"  required value="" placeholder="请输入手机号"/>
                        </td>
                    </tr>
                    <tr>
                        <th>身份证<span class="form-required">*</span></th>
                        <td>
                            <input class="form-control" type="text" name="identitycard"  required value="" placeholder="请输入身份证"/>
                        </td>
                    </tr>
                    <tr>
                        <th>职位</th>
                        <td>
                            <input class="form-control" type="text" name="position"  required value="" placeholder="请输入职位"/>
                        </td>
                    </tr>


                    <tr>
                        <th>营业执照</th>
                        <td>
                            <div class="imgFile">
                                <label>
                                    <span></span>
                                    <input type="file" class="file">
                                </label>

                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th><b>审核</b></th>
                        <td>
                            <select class="form-control" name="status">
                                <option value="1">未审核</option>
                                <option value="2">已通过</option>
                                <option value="3">未通过</option>
                            </select>
                        </td>
                    </tr>
                </table>
                <hook name="portal_admin_article_edit_view_main"/>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary js-ajax-submit">{:lang('ADD')}</button>
                    </div>
                </div>
            </div>
            <div class="col-md-3">


                <hook name="portal_admin_article_edit_view_right_sidebar"/>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="__STATIC__/js/admin.js"></script>
<script type="text/javascript">
    //编辑器路径定义
    var editorURL = GV.WEB_ROOT;
</script>
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript">
    //上传图片
    $(".file").change(function() {
        //获取图片信息
        var fileLise = $(this)[0].files;
        var fileLength = fileLise.length;
        //然后循环 生成html 插入页面上 最后就赋值给img
        for (var i = 0; i < fileLength; i++) {
            var imgDiv = '<div class="imgDiv"><img id="img' + fileLise[i].name + '"><span><i class="imgRem">×</i></span><span class="look"><span></div>';
            $(".imgFile").prepend(imgDiv);
            var imgName = document.getElementById("img" + fileLise[i].name);
            if (fileLise && fileLise[i]) {
                var file = new FileReader();
                file.readAsDataURL(fileLise[i]);
                file.onload = function() {
                    // console.log(this);
                    imgName.src = this.result;
                    // imgsrc.push(this.result)
                    // var url="filesinput";
                    // var type="post";
                    // var data={images:images};
                    // $.post(url,type,data,function(res){
                    //         console.log(res);
                    //     }
                    // );
                    $.post("filesinput",{images: imgName.src},function(res){
                        console.log(res);
                        var html='';
                        html+='<input type="hidden" name="openimages" value="'+res+'">';
                        $(".look").html(html);
                    });
                }
            }
        }


    });
    $(".imgFile").on("click", ".imgRem", function() {
        $(this).parents(".imgDiv").remove();
        // imgsrc = [];
        var imgslength = $(".imgDiv").length;
        for(var i =0; i<imgslength;i++){
            var isrc = $(".imgDiv").eq(i).find('img').attr('src');
            // imgsrc.push(isrc);
        }

    });


</script>
</body>
</html>
